<template>
  <div style="min-width: 1600px">
    <el-row :gutter="20">
      <el-col :span="24">
        <h1>存储路径选择：</h1>
        <div style="margin: 10px 0 ">
          <el-popconfirm
            v-if="false"
            confirm-button-text='确定'
            cancel-button-text='取消'
            icon="el-icon-info"
            icon-color="red"
            title="此操作不可恢复，确定删除吗？"
            @confirm="handleDelAllSnapShot"
          >
            <el-button slot="reference" style="" type="danger">删除所有抓拍图片
            </el-button>
          </el-popconfirm>
          <el-popconfirm
            v-if="false"
            style="margin-left: 10px"
            confirm-button-text='确定'
            cancel-button-text='取消'
            icon="el-icon-info"
            icon-color="red"
            title="此操作不可恢复，确定删除吗？"
            @confirm="handleDelAllSnapRecord"
          >
            <el-button slot="reference" style="" type="danger">删除所有通行视频
            </el-button>
          </el-popconfirm>
        </div>

        <el-table :data="saveList" stripe style="width: 100%">
          <el-table-column prop="sName" label="存储信息"></el-table-column>
          <el-table-column prop="iMount" label="存储位置">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.iMount"
                placeholder="请选择存储位置"
              >
                <el-option
                  v-for="item in tableData"
                  :key="item.id"
                  :label="item.sName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="iDuty" label="最大可占用大小（%）">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.iDuty"
                controls-position="right"
                :min="0"
                :max="100"
              />
            </template>
          </el-table-column>
          <el-table-column prop="iFileCount" label="保存条数">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.iFileCount"
                controls-position="right"
                :min="0"
                :max="100000"
              />
            </template>
          </el-table-column>
          <el-table-column prop="iSaveTime" label="保存时间" v-if="false">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.iSaveTime"
                :min="0"
                :max="9999"
                controls-position="right"
              />
              (秒)
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24" style="margin-top: 20px"
      >
        <el-button type="primary" @click="editStorageMediaFolder"
        >保存
        </el-button
        >
      </el-col
      >
      <el-col :span="24">
        <el-divider/>
      </el-col>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" width="100"/>
        <el-table-column label="存储介质" prop="sName" width="100"/>
        <el-table-column label="总容量（G）" prop="iTotalSize">
          <template slot-scope="scope">
            <div v-if="scope.row.iTotalSize">
              {{ scope.row.iTotalSize.toFixed(2) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="剩余容量（G）" prop="iFreeSize">
          <template slot-scope="scope">
            <div v-if="scope.row.iFreeSize">
              {{ scope.row.iFreeSize.toFixed(2) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="媒体大小（G）" prop="iMediaSize" v-if="false">
          <template slot-scope="scope">
            <div v-if="scope.row.iMediaSize">
              {{ scope.row.iMediaSize.toFixed(2) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="硬件路径" prop="sDev" v-if="false"/>
        <el-table-column label="挂载路径" prop="sMountPath" v-if="false"/>
        <el-table-column label="名字" prop="sName" v-if="false"/>
        <el-table-column label="状态" prop="sStatus">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.sStatus === 'mounted' ? 'primary' : 'success'"
              disable-transitions
            >{{
                scope.row.sStatus === "mounted" ? "已挂载" : "未挂载"
              }}
            </el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="sStatus" v-if="false">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" :disabled="scope.row.sName==`Emmc`" @click="handleFormat(scope.row)">
              格式化
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24">
        <h1 style="margin-top: 38px;">日志文件</h1>
        <el-button style="margin: 18px 20px 18px 0;" type="primary" :disabled="exportBtnDisabled" @click="handleExportLog"
        >导出
        </el-button>
        <span v-if="exportBtnDisabled">正在导出中，请稍等……</span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getHddListApi,
  getStorageMediaFolderApi,
  editStorageMediaFolderApi, delSnapShotAll, delSnapShotRecord,
  exportLogApi, getExportStatusApi
} from "@/api/access/equipment";
import request from "@/utils/request";

export default {
  name: "MvCloudgateTerminalSaveSet",

  data() {
    return {
      saveList: [],
      tableData: [],
      multipleSelection: [],
      nameArr:[],
      logsPath: '',
      exportStatusTimer: null,
      exportBtnDisabled: false
    };
  },
  created() {
    this.getHddList();
  },
  mounted() {
  },

  methods: {
    handleExportLog() {
      this.exportBtnDisabled = true
      exportLogApi().then(r => {
        console.log('exportLogApi: ', r)
        if (r.status === 0) {
          this.logsPath = r.logs_path
          this.startExportStatusInterval()
        } else {
          this.$message.error("打包失败");
          this.exportBtnDisabled = false
        }
      })
    },
    startExportStatusInterval() {
      this.exportStatusTimer = setInterval(() => {
        getExportStatusApi().then(r => {
          console.log('getExportStatusApi: ', r)
          if (r.export_status === 3) {
            clearInterval(this.exportStatusTimer)
            this.exportBtnDisabled = false

            if (this.logsPath) {
              // request({
              //   url:  'http://' + location.hostname + this.logsPath,
              //   responseType: "blob",
              //   method: "get",
              // });
              this.download(process.env.VUE_APP_BASE_URL + this.logsPath, new Date().getTime());
            }
          }
        })
      }, 1000);
    },
    download(href, title) {
      const a = document.createElement("a");
      a.setAttribute("href", href);
      a.setAttribute("download", title);
      a.click();
    },
    handleDelAllSnapShot() {
      delSnapShotAll().then(r => {
        this.msgSuccess("删除成功")
        console.log(r);
      }).catch(e => {
        console.log(e);
      })
    },
    handleDelAllSnapRecord() {
      delSnapShotRecord().then(r => {
        this.msgSuccess("删除成功")
        console.log(r);
      }).catch(e => {
        console.log(e);
      })
    },
    handleFormat() {

    },
    getHddList() {
      getHddListApi().then((res) => {
        if (res) {
          this.tableData = res.filter(c => c.sStatus != "unmounted")
        }
        console.log('this.tableData', this.tableData)
        this.tableData.forEach((item,index) => {
          if (item.sName === 'SD Card' || item.sName === 'SDCard') {
            this.tableData.splice(index, 1);
          }
        })
        console.log(206, this.tableData);
        this.getStorageMediaFolder();
      });
    },
    getStorageMediaFolder() {
      getStorageMediaFolderApi().then((res) => {
        // console.log(res);
        this.nameArr = [];
        this.saveList = res;
        this.saveList.forEach((item)=>{
          if(item.sName==="抓拍照片"){
            this.nameArr.push("抓拍照片")
          }else if(item.sName==="通行视频"){
            this.nameArr.push("通行视频")
          }

          console.log(this.nameArr.includes("抓拍照片"))
        })
      });
    },
    editStorageMediaFolder() {
      console.log('saveList', this.saveList)
      let check = 0
      let iDutySumCall = 0
      this.saveList.forEach(e => {
        console.log(e)
        iDutySumCall = iDutySumCall + e.iDuty
        // if (!e.iDuty || !e.iFileCount || !e.iSaveTime) {
        if (!e.iDuty || (!e.iFileCount && e.iFileCount !== 0)) {
          check++
        }
      })
      console.log('iDutySumCall', iDutySumCall)
      if (check == 0) {
        editStorageMediaFolderApi(this.saveList).then((res) => {
          this.$message.success("保存成功");
        });
      } else {
        this.msgError('请保证所有数据填写完整!')
        return false
      }

    },
  },
};
</script>

<style lang="scss" scoped></style>
